<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <!-- <a-button v-if="isMounted" class="goBack" type="primary" @click="goBack">返回上一级</a-button> -->
      <img
        class="goBack"
        @click="goBack"
        :src="imgSrc"
        title="返回上一级"
        @mouseenter="mouseenter"
        @mouseout="mouseout" />
      <router-view />
    </div>
  </a-config-provider>
</template>

<script>
import { domTitle, setDocumentTitle } from '@/utils/domUtil'
import { i18nRender } from '@/locales'
import router from './router'
// import goBack from '@/assets/goBack.png'

export default {
  data () {
    return {
      isMounted: false,
      imgSrc: require('@/assets/goBack2.png')
    }
  },
  mounted () {
    this.isMounted = true
  },
  methods: {
    goBack () {
      router.back(-1)
    },
    mouseenter () {
      this.imgSrc = require('@/assets/goBack.png')
    },
    mouseout () {
      this.imgSrc = require('@/assets/goBack2.png')
    }
  },
  computed: {
    locale () {
      const { title } = this.$route.meta
      title && setDocumentTitle(`${i18nRender(title)} - ${domTitle}`)

      return this.$i18n.getLocaleMessage(this.$store.getters.lang).antLocale
    }
  }
}
</script>
<style lang="less" scoped>
.goBack {
  position: absolute;
  top: 110px;
  left: 25px;
  width: 22px;
  z-index: 9;
  cursor: pointer;
}

/deep/.ant-page-header-heading-title {
  margin-left: 38px;
}
</style>
